<template>
  
  <div id="reward-home">

      <div style="background-color:#f0f0f0;">

      <a-menu mode="horizontal">
        <a-sub-menu>
            <span slot="title" class="submenu-title-wrapper" >
              <a-avatar :src="userinfo.avatar" style="margin-left:0.25rem; margin-right:0.55rem;" />
              {{ usertitle }} 
            </span>
            <a-menu-item-group title="应用中心">
            <a-menu-item key="setting:1" :to="`/stock/message`"  @click="redirectView('/stock/message')" >
                审批
            </a-menu-item>
            <a-menu-item key="setting:2" :to="`/legal/workspace`" @click="redirectView('/legal/workspace')" >
                工作台
            </a-menu-item>
            </a-menu-item-group>
        </a-sub-menu>
      </a-menu>

      <a-row :gutter="24">
        <keep-alive>
          <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">

            <div id="" class="" :style="`padding-left:2.75rem;padding-top:0.25rem;padding-bottom:0.25rem;background-color:#fefefe; ${iswechat ? `width:180%;` : '' }`"  >
              <a-breadcrumb>
                <template v-for="(elem,index) in breadcrumb">
                  <a-breadcrumb-item :key="elem.icon" :index="index" >
                    <a-icon :type="elem.icon" />
                    <span @click="redirectView(elem.path)">{{ elem.text }}</span>
                  </a-breadcrumb-item>
                </template>
              </a-breadcrumb>
            </div>

            <!-- 诉讼费支付情况 -->
            <div style="background-color:#f0f0f0;">

              <div id="legal-apply-content" class="reward-apply-content" :style="`height:auto; background-color:#fefefe; margin-top:0px; margin-left: 0.0rem; margin-right: 0.0rem; margin-bottom: 5rem; border: 1px solid #f0f0f0; front-size: 1rem; ${iswechat ? `width:180%;` : '' }`" >

                <div class="reward-apply-header" style="height:80px; width:100%; text-align:center; margin-top:20px; font-size: 1.5rem; ">
                  诉讼费支付情况
                </div>

                <div class="reward-apply-content-item reward-apply-content-title" style="padding-top:5px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col class="reward-apply-content-title-text" :span="4" style="font-size:1.1rem;">
                      基础信息
                    </a-col>
                    <a-col v-show="workflow.bpm_code" :span="4" style="margin-top: 1.0rem; margin-left: 10px; color: red; font-size:0.75rem;">
                      流程编号：{{ workflow.bpm_code }}
                    </a-col>
                   </a-row>
                </div>

                <div class="reward-apply-content-item" style="margin-top:5px;margin-bottom:5px; margin-right:10px;">
                  <a-row>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;">*</span>填报日期</span>
                    </a-col>
                    <a-col :span="8">
                      <a-input v-model="element.create_time" readonly placeholder="请填写填报日期！" @blur="validFieldToast('create_time')" style="border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0;"  />
                    </a-col>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;">*</span>填报人员</span>
                    </a-col>
                    <a-col :span="8">
                      <a-input v-model="element.create_by" readonly placeholder="请输入填报人员！" @blur="validFieldToast('create_by')" style="border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0;"  />
                    </a-col>
                  </a-row>
                </div>

                <div class="reward-apply-content-item" style="margin-top:5px;margin-bottom:5px; margin-right:10px;">
                  <a-row>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;">*</span>流程标题</span>
                    </a-col>
                    <a-col :span="8">
                      <a-input v-model="element.title" :readonly="false" placeholder="请输入标题内容！" style="border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0;"  />
                    </a-col>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;">*</span>关联案件</span>
                    </a-col>
                    <a-col :span="8">
                      <a-auto-complete :data-source="legalTitlelist" v-model="element.legal_title" placeholder="请输入关联案件信息！" style="width:85%; border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(254, 254, 254) rgb(254, 254, 254) rgb(240, 240, 240); border-image: initial;" :filter-option="filterOption" />
                      <a-tag color="#87d068" style="position: relative; float:right; right:0.05rem; margin-top:0.75rem; margin-bottom:0.075rem; margin-left:0.025rem;padding-bottom:0.5rem; transform-origin: left center; transform:scale(0.75);" @click="execView(element)"> 查看 </a-tag>
                    </a-col>
                  </a-row>
                </div>

                <div class="reward-apply-content-item reward-apply-content-title" style="padding-top:5px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col class="reward-apply-content-title-text" :span="4" style="font-size:1.1rem;">
                      诉讼费支付信息
                    </a-col>
                   </a-row>
                </div>

                <div class="reward-apply-content-item" style="margin-top:5px;margin-bottom:5px; margin-right:10px;">
                  <a-row>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;">*</span>支付金额</span>
                    </a-col>
                    <a-col :span="8">
                      <a-input prefix="￥" suffix="元" type="number" v-model="element.total_amount" :readonly="false" placeholder="请输入支付金额！" style="border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0;"  />
                    </a-col>
                  </a-row>
                </div>

                <div class="reward-apply-content-item" style="margin-top:5px;margin-bottom:5px; margin-right:10px;">
                  <a-row>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;">*</span>支付时间</span>
                    </a-col>
                    <a-col :span="8">
                      <a-date-picker v-model="element.paid_time" :readonly="false" placeholder="请输入支付时间！" style="width:100%; border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0;"  />
                    </a-col>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;">*</span>支付对象</span>
                    </a-col>
                    <a-col :span="8">
                      <a-input v-model="element.paid_name" placeholder="请输入支付对象！" style="width:100%; border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(254, 254, 254) rgb(254, 254, 254) rgb(240, 240, 240); border-image: initial;" :filter-option="filterOption" />
                    </a-col>
                  </a-row>
                </div>

                <div class="reward-apply-content-item reward-apply-content-title" style="padding-top:5px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col class="reward-apply-content-title-text" :span="4" style="font-size:1.1rem;">
                      诉讼费退费信息
                    </a-col>
                   </a-row>
                </div>

                <div class="reward-apply-content-item" style="margin-top:5px;margin-bottom:5px; margin-right:10px;">
                  <a-row>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;">*</span> 是否应退费 </span>
                    </a-col>
                    <a-col :span="8">
                      <a-auto-complete :data-source="['是','否']" v-model="element.back_flag" placeholder="请输入是否应退费！" style="border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0; width:100%; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(254, 254, 254) rgb(254, 254, 254) rgb(240, 240, 240); border-image: initial;" :filter-option="filterOption" />
                    </a-col>
                  </a-row>
                </div>

                <div v-if="element.back_flag == '是'">
                <div class="reward-apply-content-item" style="margin-top:5px;margin-bottom:5px; margin-right:10px;">
                  <a-row>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;"></span>退费时间</span>
                    </a-col>
                    <a-col :span="8">
                      <a-date-picker v-model="element.back_time" :readonly="false" placeholder="请输入退费时间！" style="width:100%; border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0;"  />
                    </a-col>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;"></span>退费金额</span>
                    </a-col>
                    <a-col :span="8">
                      <a-input prefix="￥" suffix="元" type="number" v-model="element.back_amount" placeholder="请输入退费金额！" style="width:100%; border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(254, 254, 254) rgb(254, 254, 254) rgb(240, 240, 240); border-image: initial;" :filter-option="filterOption" />
                    </a-col>
                  </a-row>
                </div>

                <div class="reward-apply-content-item" style="margin-top:5px;margin-bottom:5px; margin-right:10px;">
                  <a-row>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;"></span>退费法院</span>
                    </a-col>
                    <a-col :span="8">
                      <a-input v-model="element.back_court" :readonly="false" placeholder="请输入退费法院！" style="border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0;"  />
                    </a-col>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;"></span>法官名称</span>
                    </a-col>
                    <a-col :span="8">
                      <a-input v-model="element.judge_name" placeholder="请输入法官名称！" style="width:100%; border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(254, 254, 254) rgb(254, 254, 254) rgb(240, 240, 240); border-image: initial;" :filter-option="filterOption" />
                    </a-col>
                  </a-row>
                </div>
                </div>

                <div class="reward-apply-content-item reward-apply-content-title" style="padding-top:5px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col class="reward-apply-content-title-text" :span="4" style="font-size:1.1rem;">
                      备注信息
                    </a-col>
                   </a-row>
                </div>

                <div class="reward-apply-content-item" style="margin-top:5px;margin-bottom:5px; margin-right:10px;">
                  <a-row>
                    <a-col :span="4" style="height:auto; font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;"></span>备注信息</span>
                    </a-col>
                    <a-col :span="20">
                      <a-textarea
                        v-model="element.remark"
                        placeholder="请输入备注信息！"
                        :auto-size="{ minRows: 4, maxRows: 100 }"
                        style="height:60px; border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0;"
                      />
                    </a-col>
                  </a-row>
                </div>

                <div class="reward-apply-content-item" style="margin-top:5px;margin-bottom:5px; margin-right:10px;">
                  <a-row>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;"></span>上传附件</span>
                    </a-col>
                    <a-col :span="8">
                      <a-upload name="file" :multiple="false" :action="uploadURL" @change="uploadComplete" style="width:auto; float:left; margin-right:10px; " >
                        <a-button> <a-icon type="upload" /> 上传 </a-button>
                      </a-upload>
                      <div style="position:absolute; display:inline; float:left; margin-top:10px; " @click="downloadFiles(element)" >
                        <span>{{ element.fileName }}</span>
                      </div>
                    </a-col>
                    <a-col :span="24" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:absolute; left:5.5rem; top:0.25rem; text-algin:left; color:red; font-size:12px; ">注：请上传付款单、电子回单、付款凭证、支付凭证、回款资料等相关资料！</span>
                    </a-col>
                  </a-row>
                </div>

                <div v-show=" role == 'add' || role == 'edit' " class="reward-apply-content-item reward-apply-content-title" style="padding-top:5px;">
                  <a-divider></a-divider>
                </div>

                <div id="pr-workflow-files" v-show=" (role == 'view' || role == 'add' || role == 'edit' || role == 'workflow') && fileList && fileList.length > 0 " class="reward-apply-content-item reward-apply-content-title" style="padding-top:5px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col class="reward-apply-content-title-text" :span="4" style="font-size:1.1rem;">
                      流程附件
                    </a-col>
                   </a-row>
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col class="reward-apply-content-title-text" :span="20" style="margin-left:7.5rem;font-size:1.1rem;">
                      <a-table :columns="workFileColumns" :data-source="fileList" :bordered="false" :pagination="{hideOnSinglePage:true,}">
                        <a slot="filename" slot-scope="text,record" @click="downloadFiles(record)">{{ text }}</a>
                      </a-table>
                    </a-col>
                   </a-row>
                </div>

                <div v-show=" role == 'view' || role == 'add' || role == 'edit' || role == 'workflow' " class="reward-apply-content-item reward-apply-content-title" style="padding-top:5px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col class="reward-apply-content-title-text" :span="4" style="font-size:1.1rem;">
                      审批流程
                    </a-col>
                   </a-row>
                </div>

                <div v-show=" role == 'add' || role == 'edit' || (element.bpm_status == '1' && role == 'workflow' && operation != 'delete')" class="reward-apply-content-item" style="margin-top:5px;margin-bottom:5px; margin-right:10px;">
                  <a-row style="position: relative;">
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;">*</span>审批人员</span>
                    </a-col>
                    <a-col :span="8">
                      <a-auto-complete :data-source="lawyerInNamelist" v-model="approve_userid" style="width:200px; border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(254, 254, 254) rgb(254, 254, 254) rgb(240, 240, 240); border-image: initial;"  placeholder="请添加并选择审批人员！" :filter-option="filterOption" />
                      <a-button type="primary" style="width: 80px; color:c0c0c0; margin-left:30px; " @click="execValidApprove()"  >
                        添加
                      </a-button>
                    </a-col>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;"></span>抄送人员</span>
                    </a-col>
                    <a-col :span="8">
                      <a-auto-complete :data-source="lawyerInNamelist" v-model="release_userid" style="width:200px; border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(254, 254, 254) rgb(254, 254, 254) rgb(240, 240, 240); border-image: initial;"  placeholder="请添加并选择抄送人员！" :filter-option="filterOption" />
                      <a-button type="primary" style="width: 80px; color:c0c0c0; margin-left:30px; " @click="execValidNotify()"  >
                        添加
                      </a-button>
                    </a-col>
                    <a-col :span="24" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:absolute; left:5.5rem; top:0.25rem; text-algin:left; color:red; font-size:12px; ">注：请添加区域/总部负责人，点击下列审批人员头像或名字可以进行删除审批人员！</span>
                    </a-col>
                  </a-row>
                </div>  

                <div id="system-approve-userlist-content" v-show=" (role == 'view' || role == 'add' || role == 'edit' || role == 'workflow') && approve_userlist && approve_userlist.length > 0 " class="reward-apply-content-item system-approve-userlist-content" style="margin-top:15px; margin-bottom:15px; margin-right:10px;">
                  <a-row class="system-approve-userlist-content">
                    <a-col :span="24" :style="`width:100%; ${(50 + approve_userlist.length * 7.5) > 100 ? `overflow-x:scroll;` : '' } `">
                      <div :style="`margin-left:50px;margin-top:15px; width:${50 + approve_userlist.length * 7.5}%; height:100px;`">
                        <span style="margin-left:32.5px;">审批：</span>
                        <template v-for="(item , index) in approve_userlist ">
                          <span :key="index" style="position: relative; width:75px; height:180px;">
                            <a-avatar size="large" :index="index" :key="item.avatar" :src="item.avatar" @click="execRemoveApprove(item, index)" style="margin:2px 10px 2px 30px; width:auto;" />
                            <span style="position: absolute; top:37.5px; width: 70px; left:15px; text-align:center; " @click="execRemoveApprove(item, index)" >{{ item.name }}</span>
                            <span style="position: absolute; top:57.5px; width: 70px; left:15px; text-align:center; " @click="execRemoveApprove(item, index)" >{{ item.loginid }}</span>
                            <a-icon v-show=" ( index + 1 )< approve_userlist.length " :key="index" type="arrow-right" style="position:absolute; margin-top:5px; top: 3px; " />
                          </span>
                        </template>
                      </div>
                    </a-col>
                  </a-row> 
                  <a-row v-show=" release_userlist && release_userlist.length > 0 "> 
                    <a-col :span="24" :style="`width:100%; ${(50 + release_userlist.length * 7.5) > 100 ? `overflow-x:scroll;` : '' } `">
                      <div :style="`margin-left:50px;margin-top:15px; width:${50 + release_userlist.length * 7.5}%; height:100px;`">
                        <span style="margin-left:32.5px;">抄送：</span>
                        <template v-for="(item , index) in release_userlist ">
                          <span :key="index" style="position: relative; width:75px; height:180px;">
                            <a-avatar size="large" :index="index" :key="item.avatar" :src="item.avatar" @click="execRemoveNotify(item, index)" style="margin:2px 10px 2px 30px; width:auto;" />
                            <span style="position: absolute; top:37.5px; width: 70px; left:15px; text-align:center; " @click="execRemoveNotify(item, index)" >{{ item.name }}</span>
                            <span style="position: absolute; top:57.5px; width: 70px; left:15px; text-align:center; " @click="execRemoveNotify(item, index)" >{{ item.loginid }}</span>
                            <a-icon v-show=" ( index + 1 )< release_userlist.length " :key="index" type="arrow-right" style="position:absolute; margin-top:5px; top: 3px; " />
                          </span>
                        </template>
                      </div>
                    </a-col>
                  </a-row> 
                </div>  

                <div v-show="role == 'workflow' && !isNull(id) && (element.bpm_status == '1' && role == 'workflow' && operation != 'delete')" class="reward-apply-content-item" style="margin-top:35px;margin-bottom:5px; margin-right:10px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col :span="8">
                    </a-col>
                    <a-col class="reward-apply-content-title-text" :span="4" style="margin-left:100px;">
                      <a-button type="primary" style="width: 120px;color:c0c0c0;" @click="handleReApply();"  >
                        重新提交
                      </a-button>
                    </a-col>
                    <a-col :span="8">
                    </a-col>
                   </a-row>
                </div>

                <div v-show="role != 'view' && isNull(id) " class="reward-apply-content-item" style="margin-top:35px;margin-bottom:5px; margin-right:10px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col :span="8">
                    </a-col>
                    <a-col class="reward-apply-content-title-text" :span="4" style="">
                      <a-button type="primary" style="width: 120px;color:c0c0c0;" @click="handleSave();"  >
                        保存
                      </a-button>
                    </a-col>
                    <a-col class="reward-apply-content-title-text" :span="4" style="">
                      <a-button type="primary" style="width: 120px;" @click="handleApply();"  >
                        提交
                      </a-button>
                    </a-col>
                    <a-col :span="8">
                    </a-col>
                   </a-row>
                </div>

                <div v-show="role != 'view' && role != 'workflow' && !isNull(id)  " class="reward-apply-content-item" style="margin-top:35px;margin-bottom:5px; margin-right:10px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col :span="8">
                    </a-col>
                    <a-col class="reward-apply-content-title-text" :span="4" style="margin-left:100px;">
                      <a-button type="primary" style="width: 120px;color:c0c0c0;" @click="handlePatch();"  >
                        修改
                      </a-button>
                    </a-col>
                    <a-col :span="8">
                    </a-col>
                   </a-row>
                </div>

                <div v-show="(role == 'view' || role == 'notify' || role == 'workflow' ) && processLogList.length > 0 " class="reward-apply-content-item reward-apply-content-title" style="padding-top:5px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col class="reward-apply-content-title-text" :span="4" style="font-size:1.1rem;">
                      处理记录
                    </a-col>
                   </a-row>
                </div>

                <div v-show="(role == 'view' || role == 'notify' || role == 'workflow' ) && processLogList.length > 0 " class="reward-apply-content-item reward-apply-content-title" style="padding-top:5px;margin-left:75px;">
                  <van-cell-group style="margin-top:0px;" v-show="processLogList.length > 0">
                    <div>
                      <van-steps direction="vertical" :active="processLogList.length - 1">
                        <template v-for="value in processLogList">
                          <van-step :key="value.id">
                            <h3>{{ (isNull(value.employeeName) ? deNull(value.employee,'') : `${deNull(value.employeeName,'')}(${deNull(value.employee,'')})`) + ' ' + deNull(value.action,'') + ' ' + deNull(value.action_opinion,'') + ' ' + deNull(value.content,'').replace(/null/g,'') }}</h3>
                            <p>{{ value.create_time }}</p>
                          </van-step>
                        </template>
                      </van-steps>
                    </div>
                  </van-cell-group>
                </div>

                <div v-show=" userinfo.username != element.create_username && ( userinfo.username == cur_approve_username || proponents == cur_approve_username ) " >
                <div v-show="role == 'workflow' && !isNull(id) && (element.bpm_status == '2' || element.bpm_status == '3' ) && !(element.bpm_status == '1' && role == 'workflow' && operation != 'delete') " class="reward-apply-content-item" style="margin-top:15px;margin-bottom:5px; margin-right:10px;">
                  <a-row>
                    <a-col :span="4" style="font-size:1.0rem; margin-top:5px; text-align: center;">
                      <span style="position:relative;" ><span style="color:red;margin-right:0px;position:absolute;left:-10px;top:0px;">*</span>审批意见</span>
                    </a-col>
                    <a-col :span="20">
                      <a-textarea
                        v-model="workflow.content"
                        placeholder="请输入审批意见！"
                        :auto-size="{ minRows: 5, maxRows: 50 }"
                        style="height:80px; border: 0px solid #fefefe;  border-bottom: 1px solid #f0f0f0;"
                      />
                    </a-col>
                  </a-row>
                </div>

                <div v-show="role == 'workflow' && !isNull(id) && (element.bpm_status == '2' || element.bpm_status == '3' ) && !(element.bpm_status == '1' && role == 'workflow' && operation != 'delete') " class="reward-apply-content-item" style="margin-top:35px;margin-bottom:5px; margin-right:10px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col :span="iswechat ? 6 : 8">
                    </a-col>
                    <a-col class="reward-apply-content-title-text" :span="4" style="">
                      <a-button type="primary" style="width: 120px;color:c0c0c0;" @click="handleAgree();"  >
                        同意
                      </a-button>
                    </a-col>
                    <a-col class="reward-apply-content-title-text" :span="4" style="">
                      <a-button type="danger" style="width: 120px;" @click="handleDisagree();"  >
                        驳回
                      </a-button>
                    </a-col>
                    <a-col :span="iswechat ? 6 : 8">
                    </a-col>
                   </a-row>
                </div>
                </div>

                <div v-show=" operation == 'delete' && !isNull(id) && (element.bpm_status == '1' || element.bpm_status == '2' || element.bpm_status == '3' || element.bpm_status == '4' ) " class="reward-apply-content-item" style="margin-top:35px;margin-bottom:5px; margin-right:10px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col :span="iswechat ? 6 : 8">
                    </a-col>
                    <a-col class="reward-apply-content-title-text" :span="8" style="">
                      <a-button type="primary" style="width: 120px;color:c0c0c0;" @click="handleWFDelete();"  >
                        删除
                      </a-button>
                    </a-col>
                    <a-col :span="iswechat ? 6 : 8">
                    </a-col>
                   </a-row>
                </div>

                <div v-show=" operation == 'revocation' && !isNull(id) && (element.bpm_status == '2' || element.bpm_status == '3' ) " class="reward-apply-content-item" style="margin-top:35px;margin-bottom:5px; margin-right:10px;">
                   <a-row style="border-top: 1px dash #f0f0f0;" >
                    <a-col :span="iswechat ? 6 : 8">
                    </a-col>
                    <a-col class="reward-apply-content-title-text" :span="8" style="">
                      <a-button type="primary" style="width: 120px;color:c0c0c0;" @click="handleWFRevocation();"  >
                        撤销
                      </a-button>
                    </a-col>
                    <a-col :span="iswechat ? 6 : 8">
                    </a-col>
                   </a-row>
                </div>

                <div style="height:100px;">
                </div>
              </div>
            </div>
          </a-col>
        </keep-alive>
      </a-row>
    </div>
  </div>
</template>
<script>
import * as workflow from '@/request/workflow';
import * as workconfig from '@/request/workconfig';
import * as workprocess from '@/request/wflow.process';

export default {
  mixins: [window.mixin],
  data() {
    return {
      iswechat:false,
      iswework:false,
      pageName: "诉讼费支付情况",
      momentNewMsg: true,
      activeTabKey: 3,
      acceptType:'*/*',
      uploadURL: workconfig.system.uploadURL,
      tablename:'bs_legal_costs',
      size: 0,
      options:{
        create_time:workconfig.system.options.datetime,
        in_time:workconfig.system.options.datetime,
        establish_time:workconfig.system.options.datetime,
        start_time:workconfig.system.options.datetime,
        coop_time:workconfig.system.options.datetime,
        out_time:workconfig.system.options.datetime,
        datetime:workconfig.system.options.datetime,
        caseSTypeOptions: workconfig.system.options.caseSTypeOptions, 
        zoneOptions: workconfig.system.options.zoneOptions, 
      },
      id:'',
      pid:'',
      workflow:{
        content:'',
        bpm_code:'',
      },
      legal: {
          title:'',
      },
      element: {
        id:'', 
        create_by:'',
        create_username:'',
        create_time: null,
        title:'',
        legal_title:'', // 关联案件标题
        content:'', // 流程申请内容
        total_amount:'0.00', // 支付金额
        paid_time: null, // 支付时间
        paid_name:'',  // 支付对象
        back_flag:'', // 是否应退诉讼费
        back_amount:'0.00', // 退费金额
        back_time: null, // 退费时间
        back_court:'', // 退费法院
        judge_name:'', // 法官姓名
        remark:'', // 备注
        bpm_status:'',
        bpm_code:'',
        pid:'',
        xid:'', 
      },
      data: [],
      readonly: false,
      userList:[],
      firmlist:[],
      firmNamelist:[],
      lawyerlist:[],
      lawyerNamelist:[],
      processLogList:[],
      release_userid:'',
      release_userlist:[],
      approve_userid:'',
      approve_userlist:[],
      notify_userid:'',
      notify_userlist:[],
      approve_executelist:[],
      legallist:[],
      legalTitlelist:[],
      lawyerInnerList:[],
      lawyerInNamelist:[],
      role:'',
      file:'',
      selectedSheet: null,
      sheetName: null,
      collection: [{ }],
      userinfo: {
        username:'',
      },
      usertitle:'',
      cur_approve_username:'',
      proponents:'',
      operation:'',
      workFileColumns:workconfig.subColumns.workFilesColumns,
      fileList:[],
      columns: workconfig.columns.reward.items,
      wfcolumns: workconfig.columns.reward.wfcolumns,
      message: workconfig.compValidation.legalapply.message,
      valid: workconfig.compValidation.legalapply.valid,
      goodsborrowtype: workconfig.goodsborrowtype,
      diplomaType: workconfig.compcolumns.diplomaTypeColumns,
      acceptType: workconfig.compcolumns.acceptType,
      commonTypeColumns: workconfig.compcolumns.commonTypeColumns,
      sealTypeColumns: workconfig.compcolumns.sealTypeColumns,
      statusList:['存续','注销','经营异常'],
      natureList:['关联公司','非关联公司'],
      industryList:[ '房地产行业', '物业行业', '商管行业', '金融行业', '商贸行业', '建筑行业', '高新技术行业', '监理行业', '医疗行业', '商务咨询行业', '环保行业', '教育行业'],
      breadcrumb:[{icon:'home',text:'首页',path:'/legal/workspace'},{icon:'user',text:'费用流程',path:'/legal/workspace'},{icon:'form',text:'诉讼费支付情况',path:''}],
      statusType:{'valid':'有效','invalid':'删除'},
      zoneType: workconfig.system.options.zoneType,
    };
  },
  watch:{
    'element.id'(value,oldVal){
      this.workflow.bpm_code = value.slice(2,16);
    },
    deep:true,
  },
  activated() {
    
  },
  mounted() {
    this.queryInfo();
  },
  methods: {
      moment,
      isNull:Betools.tools.isNull,
      deNull:Betools.tools.deNull,

      // 名称过滤
      filterOption(input, option) {
          return (
            option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
          );
      },

      // 执行上传操作
      uploadComplete(info) {
        if (info.file.status === 'done') {
          const tempfile = info.file.response.name + `###${info.file.name}`;
          this.element.files = Betools.tools.isNull(this.element.files) ? tempfile : this.element.files + ',' + tempfile ;

          // 此处添加代码，将附件记录持久化至pr_workflow_files表中，表字段：id,title,table_name,wid,filetype,status,files,create_by,create_time,filename,content,remark,group_id
          const filename = info.file.name;
          const id = Betools.tools.queryUniqueID();
          const title = this.element.title;
          const table_name = this.tablename;
          const wid = this.element.id;
          const filetype = '';
          const group_id = this.element.id;
          const create_time = dayjs().format('YYYY-MM-DD');
          const create_by = this.element.create_by || this.element.create_username;
          const status = 'valid';
          const files = tempfile;
          const content = '';
          const remark = '';
          const element = {id,title,table_name,wid,filetype,status,files,create_by,create_time,filename,content,remark,group_id}
          this.fileList.push(element); // pr_workflow_files // 每次打开流程详情页面，获取本流程对应的流程附件表，并于下方展示

          this.$message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} file upload failed.`);
        }
      },

      // 下载附件
      async downloadFiles(record){
        vant.Toast.loading({ duration: 3000,  forbidClick: false,  message: '下载文件中...', });
        if(record.files.includes(',')){
          const list = record.files.split(',');
          for(const files of list){
            this.downloadFileCallback(files);
          }
        } else {
          this.downloadFileCallback(record.files);
        }
        await Betools.tools.sleep(1500);
        vant.Toast.clear();
      },

      // 执行下载文件
      async downloadFileCallback(files){
        const url = `https://api.yunwisdom.club:30443/gateway-xmysql/@${files.split('@')[1]}@/download?name=${files.split('###')[0]}`;
        window.open(url,'_blank');
      },

      // 企业微信登录处理函数
      async  weworkLogin  (codeType = 'search', systemType = 'search', version = 'v5')  {
          /**
           URL直连模式登陆：http://stock.yunwisdom.club:30080/#/?mode=session&mobile=19999763013&account=bWVuZ3Fm
            1. mobile请替换为登录人的mobile。
            2. account请替换为登录人的account，注意account需要使用window.btoa('args')函数处理一下。
           */
          return await Betools.query.weworkLogin(codeType, systemType, version);
      },

      // 跳转到登录界面
      async redirectLogin(usertitle = ''){
        const { $router } = this;
        if(usertitle == '登录'){ // 如果页面显示为登录，则跳转到登录界面
          $router.push('/login');
        }
      },
      
      // 执行页面跳转
      async redirectView(path) {
          Betools.tools.isNull(path) ? null: this.$router.push(path);
      },
     
      // 获取基础信息
      async queryInfo() {
        try {
          this.iswechat = Betools.tools.isWechat(); //查询当前是否微信端
          this.iswework = Betools.tools.isWework(); //查询是否为企业微信

          const vsystem_type = Betools.tools.getUrlParam('system_type') || 'v5';
          const weworkinfo = await this.weworkLogin('search','search',vsystem_type); //查询当前登录用户
          this.userinfo = weworkinfo.userinfo;
          this.usertitle = weworkinfo.usertitle;

          this.role = Betools.tools.getUrlParam('role');
          this.stage = Betools.tools.getUrlParam('stage');
          this.apply = Betools.tools.getUrlParam('apply') || 'view';
          this.operation = Betools.tools.getUrlParam('operation') || 'view';
          this.back = Betools.tools.getUrlParam('back') || '/legal/workspace'; //查询上一页

          const userinfo = await Betools.storage.getStore('system_userinfo');  //获取用户基础信息  
          try {
            this.element.create_time = dayjs().format('YYYY-MM-DD');
            this.element.create_by = (userinfo ? userinfo.realname || userinfo.name || userinfo.lastname : '');
            this.element.create_username =  (userinfo ? userinfo.username || userinfo.loginid : '');
          } catch (error) {
            console.error(error);
          }
         
          const id = this.id = Betools.tools.getUrlParam('id');
          const pid = this.pid = Betools.tools.getUrlParam('pid');
          this.legal = !Betools.tools.isNull(pid) ? await Betools.query.queryTableDataDB('bs_legal' , pid) : { title: '', };
          if(!Betools.tools.isNull(id)){
            try {
              this.element = await Betools.query.queryTableDataDB(this.tablename , id);
              this.element.create_time = dayjs(this.element.create_time).format('YYYY-MM-DD');
              this.element.fileName = Betools.tools.isNull(this.element.files) ? '' : this.element.files.split('###')[1];
              this.element.fileName = this.element.fileName.includes(',') ? this.element.fileName.split(',')[0] : this.element.fileName;
              const tlist = this.element.files.split(',');
              for (const item of tlist){
                const id = Betools.tools.queryUniqueID();
                const filename = item.split('###')[1];
                const status = 'valid';
                const files = item;
                const element = {id,filename,status,files}
                this.fileList.push(element); // pr_workflow_files // 每次打开流程详情页面，获取本流程对应的流程附件表，并于下方展示
              }
              (async()=>{
                this.processLogList = await Betools.query.queryProcessLog();
                if(this.role == 'workflow' || this.role == 'view'){
                  const process = this.processLogList.find(item => {return item.action_opinion == '发起流程' && item.process_name == '流程审批' && !Betools.tools.isNull(item.relate_data)});
                  this.approve_userlist = JSON.parse(process.relate_data);
                  this.release_userlist = JSON.parse(process.notify_data);
                  try {
                    if(this.element.bpm_status == '2'){
                      let cur_approve_username = this.cur_approve_username = Betools.tools.getUrlParam('cur_approve_username') || '_';// 如果 cur_approve_username == '_' ，则查询查询pr_log，对应此表和此id，获取当前审批人员，如果未获取到，则值为'_'
                      this.proponents = Betools.tools.getUrlParam('proponents') || '_';  
                      if(cur_approve_username == '_' || Betools.tools.isNull(cur_approve_username)){
                        const resp = await Betools.query.queryProcessLogByUserNameAndID(this.tablename,this.userinfo.username,id);
                        this.cur_approve_username = cur_approve_username = resp && resp.length > 0 ? this.userinfo.username : '_';
                      }
                      if(this.element.create_username == this.userinfo.username && cur_approve_username == this.userinfo.username ){ // 如果审批人员就是发起人员，则流程自动同意，即当前登录人员等于发起人员，当前登录人员等于当前审批人员，获取当前审批人员查询pr_log，对应此表和此id
                        this.workflow.content = '同意流程申请！';
                        this.handleAgree();
                      }
                    }
                  } catch (error) {
                    console.error(error);
                  }
                }
              })();
            } catch (error) {
              console.error(error);
            }
          } else {
          
          }

          try {
            this.firmlist = await Betools.manage.queryTableData('bs_legal_firm' , `_where=(status,ne,0)&_fields=id,firm_name&_sort=-id&_p=0&_size=10000`);
            this.firmNamelist = this.firmlist.map(item => { return item.firm_name });
            this.lawyerlist = await Betools.manage.queryTableData('bs_legal_lawyer' , `_where=(status,ne,0)&_fields=id,lawyer_name,mobile&_sort=-id&_p=0&_size=10000`);
            this.lawyerNamelist = this.lawyerlist.map(item => { return item.lawyer_name });
            this.legallist = await Betools.manage.queryTableData('bs_legal' , `_where=(status,ne,已删除)&_fields=id,title&_sort=-id&_p=0&_size=10000`);
            this.legalTitlelist = this.legallist.map(item => { return item.title });
          } catch (error) {
            console.error(error);
          }

          try {
            this.lawyerInnerList = await Betools.query.queryLawyerList();
            const lawyerInnerList = this.lawyerInnerList.map(item => {return item.name });
            this.lawyerInNamelist = [...new Set(lawyerInnerList)];
          } catch (error) {
            console.error(error);
          }

          this.element.legal_title = Betools.tools.isNull(this.legal.title) ? this.element.legal_title : this.legal.title;
          this.element.pid = pid;

        } catch (error) {
          console.log(error);
        }
      },

      // 查询不同状态的律所数据
      async handleList(tableName , id){
        let element = await Betools.query.queryTableData(tableName , id);
        return Betools.tools.isNull(element) ? element : {};
      },

      // 验证字段
      validField(fieldName){
        return Betools.tools.isNull(this.element[fieldName]);
      },

      // 验证字段信息
      validFieldToast(fieldName){
        const tipsession = { title:'请输入流程标题！', legal_title:'请输入关联案件，如尚无关联案件请填写无！', total_amount:'请输入支付金额！', paid_time:'请输入支付时间！', paid_name:'请输入支付对象！', back_flag:'请选择是否应退费！', create_time:'请输入填报日期！', create_by:'请输入填报人员！',};
        const flag = this.validField(fieldName);
        if(flag){
          Betools.tools.isNull(tipsession[fieldName]) ? null : this.$toast.fail(`${tipsession[fieldName]}！` );
          return false;
        }
      },

      // 检测知会人员，并加入知会列表
      async execValidNotify(){
        const username = this.release_userid;
        let userlist = await Betools.manage.queryUserByNameVHRM(username, 1000);
        userlist = userlist.filter( (item , index) => { const findex = userlist.findIndex( elem => { return item.mobile == elem.mobile });  return findex == index;});
        userlist = this.release_userlist.concat(userlist);
        userlist = userlist.filter( (item , index) => { const findex = userlist.findIndex( elem => { return item.mobile == elem.mobile });  return findex == index;});
        this.release_userlist = userlist; 
        this.release_userlist.map((item,index) => { item.index = index;});
      },

      // 检测审批人员，并加入审批列表
      async execValidApprove(){
        const username = this.approve_userid;
        let userlist = await Betools.manage.queryUserByNameVHRM(username, 1000);
        userlist = userlist.filter( (item , index) => { const findex = userlist.findIndex( elem => { return item.mobile == elem.mobile });  return findex == index;});
        userlist = this.approve_userlist.concat(userlist);
        userlist = userlist.filter( (item , index) => { const findex = userlist.findIndex( elem => { return item.mobile == elem.mobile });  return findex == index;});
        this.approve_userlist = userlist; 
        this.approve_userlist.map((item,index)=>{ item.index = index;});
      },

      // 移除第Index个审批人员
      async execRemoveApprove(item,index){
        this.$confirm({
              title: "确认操作",
              content: `您好，您确认删除审批人员${item.name}(${item.loginid})吗?`,
              onOk: async(result) => {
                this.approve_userlist.splice(index, 1);
                this.approve_userlist.map((item,index) => { item.index = index;});
              }
        });
      },

      // 移除第Index个抄送人员
      async execRemoveNotify(item,index){
        this.$confirm({
              title: "确认操作",
              content: `您好，您确认删除抄送人员${item.name}(${item.loginid})吗?`,
              onOk: async(result) => {
                this.release_userlist.splice(index, 1);
                this.release_userlist.map((item,index) => { item.index = index;});
              }
        });
      },

      // 案件记录查看申请
      async execView(elem){
          const { $router } = this;
          vant.Toast.loading({ duration: 3000,  forbidClick: false,  message: '刷新中...', });
          let url = null;
          if(!Betools.tools.isNull(elem.pid)){
            url = `${window.location.protocol}//${window.location.host}/#/legal/case/legalapply?id=${elem.pid}&type=1&tname=案件详情&apply=view&role=view`;
          } else {
            const title = this.element.legal_title; // 先根据关联案件信息，查询案件标题，根据查询结果，返回到相应案件
            const condition = `_where=(title,like,~${title}~)&_sort=-id&_p=0&_size=1`;
            let list = await Betools.manage.queryTableData('bs_legal' , condition);
            if(list && list.length > 0){
              elem = list[0];
              url = `${window.location.protocol}//${window.location.host}/#/legal/case/legalapply?id=${elem.id}&type=1&tname=案件详情&apply=view&role=view`;
              console.log(`window open url:` , url);
            }
          }
          if(!Betools.tools.isNull(url)){
            window.open(url,'_blank');
          }
          vant.Toast.clear();
      },
      
      // 用户提交入职登记表函数
      async handleApply() {
        await this.handleSave(); //先执行保存操作，保存完毕后执行流程跳转功能
      },

      // 保存用户数据但是不提交
      async handleSave(){
        
        this.loading = true; // 显示加载状态
        const userinfo = await Betools.storage.getStore('system_userinfo'); // 获取用户基础信息
        const id = Betools.tools.queryUniqueID(); // 表单ID

        try {
          this.element.create_time = dayjs().format('YYYY-MM-DD');
          this.element.create_by = (userinfo ? userinfo.realname || userinfo.name || userinfo.lastname : '');
          this.element.content = this.element.title;
        } catch (error) {
          console.error(error);
        }

        const tipsession = { title:'请输入流程标题！', legal_title:'请输入关联案件，如尚无关联案件请填写无！', total_amount:'请输入支付金额！', paid_time:'请输入支付时间！', paid_name:'请输入支付对象！', back_flag:'请选择是否应退费！', create_time:'请输入填报日期！', create_by:'请输入填报人员！',};
        const keys = Object.keys(tipsession); // 验证数据是否已经填写

        const invalidKey =  keys.find(key => {
          const flag = this.validField(key); // const returnValue = flag ? key : '';
          return flag;
        });

        if(!Betools.tools.isNull(invalidKey)){ // 校验字段完整性
            return await vant.Dialog.alert({  title: '温馨提示',  message: `您好，${tipsession[invalidKey]}`, });
        }

        // 检查审批人员列表
        if(Betools.tools.isNull(this.approve_userlist) || this.approve_userlist.length == 0 ){
          return await vant.Dialog.alert({ title: '温馨提示', message: `请选择审批人员！`,});
        }

        // 是否确认提交此自由流程?
        this.$confirm({
            title: "确认操作",
            content: "是否确认提交此账户信息?",
            onOk: async() => {
                  const element  = JSON.parse(JSON.stringify(this.element));
                  const result = await Betools.manage.postTableData(this.tablename , element); // 向表单提交form对象数据
                  debugger;
                  
                  if(result && result.error && result.error.errno){ //提交数据如果出现错误，请提示错误信息
                      return await vant.Dialog.alert({  title: '温馨提示',  message: `系统错误，请联系管理人员，错误编码：[${result.error.code}]. `, });
                  }
                  
                  // 提交审批记录, 记录审批日志, 向第一个审批人发送一条审批待办
                  try {
                    const users = this.approve_userlist.map(item=>item.loginid);
                    const wfUsers = users.slice(0,-1).toString(); // 审批人员
                    const nfUsers = ''; // 知会人员
                    const approver = users.slice(-1).toString(); // 最后一个终审人员
                    const data = element;
                    const ctime = dayjs().subtract(2,'minute').format('YYYY-MM-DD HH:mm:ss');
                    data.approve_userlist = JSON.parse(JSON.stringify(this.approve_userlist));
                    data.release_userlist = JSON.parse(JSON.stringify(this.release_userlist));
                    
                    try {
                      await this.handleSubmitWF(userinfo, wfUsers, nfUsers, approver, this.tablename, data.id, data, ctime, workconfig.system.website);
                    } catch (error) {
                      console.error(error);
                    }
                  } catch (error) {
                    console.error(error);
                  }

                  this.loading = false; //设置状态
                  this.readonly = true;
                  this.role = 'view';
                  this.handleList(this.tablename , id);
                  return vant.Dialog.alert({  title: '温馨提示',  message: `提交成功！`, }); //this.$toast.success('律师录入申请成功！');
               }
          });
      },

      // 修改用户数据但是不提交
      async handlePatch(){
        
        this.loading = true; // 显示加载状态
        const userinfo = await Betools.storage.getStore('system_userinfo'); // 获取用户基础信息
        const id = Betools.tools.getUrlParam('id'); // 表单ID

        //是否确认提交此自由流程?
        this.$confirm({
            title: "确认操作",
            content: "是否确认修改此账户信息?",
            onOk: async() => {
                  const element  = JSON.parse(JSON.stringify(this.element));
                  const result = await Betools.manage.patchTableData(this.tablename, id, element); // 向表单提交form对象数据
                  if(result && result.error && result.error.errno){ //提交数据如果出现错误，请提示错误信息
                      return await vant.Dialog.alert({  title: '温馨提示',  message: `系统错误，请联系管理人员，错误编码：[${result.error.code}]. `, });
                  }
                  this.loading = false;
                  this.readonly = true;
                  this.role = 'view';
                  this.handleList(this.tablename , id);
                  return vant.Dialog.alert({  title: '温馨提示',  message: `修改操作成功！`, }); //this.$toast.success('律师修改操作成功！');
               }
          });
      },

      // 用户重新提交审批流程
      async handleReApply(){
          let process_loglist = [];
          this.loading = true; // 显示加载状态
          const userinfo = await Betools.storage.getStore('system_userinfo'); // 获取用户基础信息

          // 检查审批人员列表
          if(Betools.tools.isNull(this.approve_userlist) || this.approve_userlist.length == 0 ){
            return await vant.Dialog.alert({ title: '温馨提示', message: `请选择审批人员！`,});
          }
          
          // 获取流程日志记录
          if(!Betools.tools.isNull(this.processLogList) && this.processLogList.length > 0){
            process_loglist = this.processLogList.filter(item => {return item.action_opinion == '发起流程' && item.process_name == '流程审批' });
          }

          // 是否确认提交此自由流程?
          this.$confirm({
              title: "确认操作",
              content: "是否重新提交此流程申请?",
              onOk: async(result) => {
                    vant.Toast.loading({ duration: 3000,  forbidClick: false,  message: '提交中...', });
                    const element = JSON.parse(JSON.stringify(this.element));
                    // 提交审批前，先检测同一业务表名下，是否有同一业务数据主键值，如果存在，则提示用户，此记录，已经提交审批
                    if (await Betools.manage.queryApprovalExist(this.tablename,  element.id)) {
                      return vant.Toast.fail("您好，当前申请还在审批过程中，无法再次提交流程！");
                    }
                    try {
                      result = await Betools.manage.patchTableData(this.tablename, element.id, element); 
                    } catch (error) {
                      console.error(error);
                    }

                    // 提交审批记录, 记录审批日志, 向第一个审批人发送一条审批待办
                    const users = this.approve_userlist.map(item=>item.loginid);
                    const wfUsers = users.slice(0,-1).toString(); // 审批人员
                    const nfUsers = ''; // 知会人员
                    const approver = users.slice(-1).toString(); // 最后一个终审人员
                    const data = element;
                    const ctime = dayjs().subtract(2,'minute').format('YYYY-MM-DD HH:mm:ss');
                    data.approve_userlist = JSON.parse(JSON.stringify(this.approve_userlist));
                    data.release_userlist = JSON.parse(JSON.stringify(this.release_userlist));
                    data.process_loglist = JSON.parse(JSON.stringify(process_loglist));

                    try {
                      await this.handleReSubmitWF(userinfo, wfUsers, nfUsers, approver, this.tablename, data.id, data, ctime, workconfig.system.website);
                    } catch (error) {
                      console.error(error);
                    }
                    
                    (async()=>{
                      Betools.manage.handleLog(this.tablename , element , '发起', '重新发起流程审批' , `${userinfo.realname} 发起流程申请`);
                    })();

                    vant.Toast.clear();
                    this.loading = false; //设置状态
                    this.readonly = true;
                    this.role = 'view';
                    vant.Dialog.alert({  title: '温馨提示',  message: `重新发起流程申请成功！`, }); //this.$toast.success('案件发起申请成功！');
                }
            });
      },

      // 提交自由流程
      async handleSubmitWF(userinfo, wfUsers, nfUsers , approver , curTableName , curItemID , data , ctime, domainURL = workconfig.system.website) {
        try {
          const checkFlag = workflow.checkSubmitInfo( wfUsers,  nfUsers, approver, ); //校验提交信息是否准确
          let vflag = await Betools.manage.queryApprovalExist(curTableName, curItemID); //提交审批前，先检测同一业务表名下，是否有同一业务数据主键值，如果存在，则提示用户，此记录，已经提交审批
          let vflag_ = Betools.storage.getStore(`start_free_process_@table_name#${curTableName}@id#${curItemID}`);
          if ( Betools.tools.isNull(approver) || !checkFlag || vflag || vflag_ == "true") { //如果校验标识有误，则直接返回
              return !checkFlag ? null : vant.Toast.fail("已提交过申请，无法再次提交审批！"); //数据库中已经存在此记录，提示用户无法提交审批
          }
          return await workprocess.handleStartWF(userinfo, wfUsers, nfUsers, approver, curTableName, curItemID, data, ctime, domainURL);
        } catch (error) {
          console.log(error);
        }
      },

      // 重新提交自由流程
      async handleReSubmitWF(userinfo, wfUsers, nfUsers , approver , curTableName , curItemID , data , ctime, domainURL = workconfig.system.website) {
        try {
          const checkFlag = workflow.checkSubmitInfo( wfUsers,  nfUsers, approver, ); //校验提交信息是否准确
          let vflag = await Betools.manage.queryApprovalExist(curTableName, curItemID); //提交审批前，先检测同一业务表名下，是否有同一业务数据主键值，如果存在，则提示用户，此记录，已经提交审批
          let vflag_ = Betools.storage.getStore(`start_free_process_@table_name#${curTableName}@id#${curItemID}`);
          if ( Betools.tools.isNull(approver) || !checkFlag || vflag || vflag_ == "true") { //如果校验标识有误，则直接返回
              return !checkFlag ? null : vant.Toast.fail("已提交过申请，无法再次提交审批！"); //数据库中已经存在此记录，提示用户无法提交审批
          }
          return await workprocess.handleReStartWF(userinfo, wfUsers, nfUsers, approver, curTableName, curItemID, data, ctime, domainURL);
        } catch (error) {
          console.log(error);
        }
      },

      // 工作流程审批同意
      async handleAgree(){ // 生成下一条流程记录 // 转移当前审批流程记录到历史记录中 // 通知下一位审批人员
          let response = null;
          if(Betools.tools.isNull(this.workflow.content)){
            return await vant.Dialog.alert({ title: '温馨提示', message: `请输入审批意见！`,});
          }
          try {
            const processID = Betools.tools.getUrlParam('processID');
            const domainURL = workconfig.system.website;
            response = await workprocess.handleAgreeWF(this.tablename, this.element.id, this.element, this.workflow.content, processID , '', domainURL);
            this.$router.push(`/legal/${this.tablename.replace('bs_legal_','') + 'apply'}?id=${this.element.id}&type=1&tname=流程详情&apply=view&role=view`);
            this.processLogList = await Betools.query.queryProcessLog();
            this.role = this.apply = 'view';
            vant.Toast.clear();
          } catch (error) {
            console.error(error);
          }
          return response;
      },

      // 工作流程审批驳回
      async handleDisagree(){ // 流程审批状态改为驳回 // 转移当前审批流程记录到历史记录中 // 通知审批发起人员流程驳回
          let response = null;
          if(Betools.tools.isNull(this.workflow.content)){
            return await vant.Dialog.alert({ title: '温馨提示', message: `请输入审批意见！`,});
          }
          try {
            const processID = Betools.tools.getUrlParam('processID');
            const domainURL = workconfig.system.website;
            response = await workprocess.handleRejectWF(this.tablename, this.element.id, this.element, this.workflow.content, processID, '', domainURL);
            this.$router.push(`/legal/${this.tablename.replace('bs_legal_','') + 'apply'}?id=${this.element.id}&type=1&tname=流程详情&apply=view&role=view`);
            this.processLogList = await Betools.query.queryProcessLog();
            this.role = this.apply = 'view';
            vant.Toast.clear();
          } catch (error) {
            console.error(error);
          }
          return response;
      },

      // 工作流程审批删除
      async handleWFDelete(){
        const {element , tablename } = this;
        await Betools.query.handleWFDelete({element , tablename });
      },

      // 工作流程审批撤销
      async handleWFRevocation(){
        const {element , tablename } = this;
        await Betools.query.handleWFRevocation({element , tablename });
      },

  },
};
</script>
<style scoped >
    @import "../../../assets/css/reward.home.css";
    @import "../../../assets/css/reward.apply.css";
    @import "../../../assets/css/progress.apply.css";
</style>
